import { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Table, Tag, Button, Input, Select, Tabs, Form } from 'antd';
import { history } from 'umi'
import { saveProject, queryProject, updateProjectStatus, rejectProjectStatus } from '@/services/project'
import BaseFormInfo from './components/BaseFormInfo'
import CommendModal from './components/CommendModal'
import { statusColorMap, statusTextMap } from '../project/params';
import styles from './index.less';
import moment from 'moment';

const { Option } = Select;
const { Search } = Input;
const { TabPane } = Tabs;


const ProjectDetail = (props) => {
  const id = props.location.query?.id;
  const type = props.location.query?.type;
  const [data, setData] = useState({});
  const [activeKey, setActiveKey] = useState('1');
  const [status, setStatus] = useState('0');
  const [searchVal, setSearchVal] = useState('')
  const [visible, setVisible] = useState(false);
  const [commentMark, setCommentMark] = useState();
  const [infoObj, setInfoObj] = useState({})
  const [isLeader, setIsLeader] = useState('1')
  const [isOneself, setIsOneself] = useState('1')

  const [formProject] = Form.useForm();

  const dataMat = 'YYYY/MM/DD';

  useEffect(()=>{
   if(id){
     getProjectdetail()
   }
  }, [])

  const getProjectdetail = async () => {
    const res = await queryProject({projectId: id})
    if(res.code == 200){
      setInfoObj(res.data??{})
      setStatus(res?.data?.status??0)
      setIsLeader(res?.data?.leader??'1')
      setIsOneself(res?.data?.oneself??'1')
      const obj = res.data
      formProject.setFieldsValue({name: obj.name, 
        master: obj.master, 
        member: obj.member, 
        weight: obj.weight, process: obj.process, 
        starttime: moment(obj.starttime, dataMat),
        endtime: moment(obj.endtime, dataMat),
        remark: obj.remark,
        oid: obj.oid,
        file: obj?.file??[]
      })
    }
  }
  const changeKey = (key) => {
      setActiveKey(key)
  }
  const save = (tip) => {
    formProject.validateFields().then((data)=>{
       let saveData = Object.assign({}, data, {
        starttime: data.starttime.format(dataMat),
        endtime: data.endtime.format(dataMat),
        status,
        id: id || '',
       })
       saveProject(saveData).then((res)=>{
          if(res.code == 200) {
            if(tip == '1'){
              updateProjectStatus({id,opinion:'', status,}).then((result)=>{
                if(result.code == 200){
                  history.push('/project')
                }
              })
            } else {
              history.push('/project')

            }
          }
       })
    })
  }
  const goBack = () => {
    history.goBack();
  }
  const resolveFun = () => {
    setCommentMark('1')
    setVisible(true)
  }
  const rejectFun = () => {
    setCommentMark('2')
    setVisible(true)
  }
  const updateCommend = (val) => {
    gpApproal(val)
  }
  const closeModal = () => {
    setVisible(false)
  }
  const gpApproal = (val) => {
    // commentMark // 驳回 通过
    if(commentMark === '1'){
      updateProjectStatus({id,opinion:val, status,}).then((result)=>{
        if(result.code == 200){
          setVisible(false)
          history.push('/project')
        }
      })
    }else{
      rejectProjectStatus({id, opinion: val, status,}).then((res)=>{
        if(res.code == 200){
          setVisible(false)
          history.push('/project')
        }
      })
    }
  }
  // 创建者和负责人可以修改
  return (
    <>
    <div className={styles.tableWrap}>
      <div className={styles.listWrap}>
        <Tag style={{ height: '24px', margin: '0 0 20px 0px' }} color={statusColorMap.get(status+'')}>{statusTextMap.get(status+'')}</Tag>
        <Tabs activeKey={activeKey} type="card" onChange={changeKey}>
            <TabPane tab="基础信息" key="1">
              <BaseFormInfo form={formProject} disabled={id && isLeader !== '1' && isOneself !== '1' || (Number(status) === 1 || Number(status) === 3 || Number(status) === 4)} infoObj={infoObj} edit={id ? true : false}></BaseFormInfo>
            </TabPane>
            {/* <TabPane tab="其他信息" key="2">
            Content of card tab 2
            </TabPane> */}
        </Tabs>
        
        <div style={{ display: 'flex',justifyContent: 'center',margin: '20px 0 0 0' }}>
          {type != '2' && <>
            {Number(status) === 0 && <Button type='primary' disabled={id && isLeader !== '1' && isOneself !== '1' || (Number(status) === 1 || Number(status) === 3 || Number(status) === 4)} onClick={()=>save('1')}>提交评审</Button>}
            {Number(status) === 2 && <Button type='primary' onClick={()=>save('1')}>上线审核</Button>}
            {(Number(status) === 0 || Number(status) === 2) && <Button onClick={() =>save('0')} type='primary' style={{marginLeft: 20}}>保存</Button>}
            <Button onClick={goBack} style={{marginLeft: 20}}>返回</Button>
          </>}
          {type == '2' && <>
            <Button type='primary' onClick={resolveFun}>通过</Button>
            <Button onClick={rejectFun} style={{marginLeft: 20}}>驳回</Button>
          </>}
          {visible && <CommendModal commentMark={commentMark} visible={visible} updateCommend={updateCommend} closeModal={closeModal}></CommendModal>}
        </div>
      </div>
    </div>
    </>
  )
}
export default ProjectDetail